<script lang="ts" setup>
	import { ref } from "vue";
	import { theme } from '@/store/module/theme'

	// 账号与安全
	const accountSetting = ref([

		[
			{
				title: "账号",
				value: "000000001",
			},

			{
				title: "邮箱",
				value: "2188817393@qq.com",
			},

			{
				title: "手机号",
				value: "138****5678",
			},
		],
		[
			{
				title: '修改密码'
			},
			{
				title: '登录过的设备'
			},
			{
				title: '注销账号'
			},
		]

	]);
</script>

<template>
	<view :class="theme()" class="w-full min-h-[100vh]" :style="{background:'var(--Gradient-color)'}">
		<u-cell-group class="mb-[20rpx] bg-[var(--bg-color)]" v-for="(i,idx) in accountSetting" :key="idx">
			<template v-for="(item,index) in i " :key="index">
				<u-cell clickable :rightIconStyle="{
							color:'var(--text-color)'
						}" arrow-direction="right" isLink :url="item.url">
					<template #title>
						<view class=" text-[var(--text-color)] text-[16px] font-bold">
							{{item.title}}
						</view>
					</template>
					<template #value>

						<view v-if="item.value"
							class="w-[60%] text-[14px] truncate text-end mr-[20rpx] text-[var(--text-color)]">
							{{item.value}}
						</view>
					</template>
				</u-cell>
			</template>
		</u-cell-group>

		<view class="my-[40rpx] h-[100rpx] bg-[var(--bg-color)] w-full flex justify-center items-center ">
			退出登录
		</view>
	</view>
</template>